<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改信息</title>
</head>

<body>
    <div>
        姓名：
        <input class="username" type="text" name="name">
    </div>
    <div>
        年龄：
        <input class="age" type="text" name="age">
    </div>
    <div>
        性别：
        <input class="sex" type="radio" name="sex" value="男">男
        <input class="sex" type="radio" name="sex" value="女">女
    </div>
    <div>
        班级：
        <input class="stu_class" type="text" name="class">
    </div>
    <div>
        <input class="btn" type="button" value="确认修改">
    </div>

    <script src="./js/jquery-1.10.1.min.js"></script>
    <script>
        $(function () {
            // 获取信息
            var $id = location.href.split('?')[1].split('=')[1];
            $.get(`./select_id.php?id=${$id}`, function (data) {
                data = JSON.parse(data);
                // console.log(data);
                $('.username').val(data[0].name);
                $('.age').val(data[0].age);
                $('.stu_class').val(data[0].class);
                var item = document.getElementsByClassName('sex');
                for (let i = 0; i < item.length; i++) {
                    if (item[i].value == data[0].sex) {
                        item[i].checked = true;
                    }
                }
            });

            // 修改信息
            $('body').find('.btn').on('click', function () {
                $.post(`./edit_inf.php`, {
                    id: $id,
                    name: $('.username').val(),
                    age: $('.age').val(),
                    sex: $('input:radio:checked').val(),
                    class: $('.stu_class').val()
                }, function (data) {
                    console.log(data);
                })
            })
        })
    </script>
</body>

</html>